import React, { useState, useEffect } from "react";
import Left from "../../css/zh/icon/left.svg?react";
import { Form, Input, Space, Toast } from "antd-mobile";
import { MailOutline } from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
import store from "../../redux";
import axios from "axios";
import "../../css/zh/zc.css";
import Yx from "../../css/zh/icon/yx.svg?react";
import Dsz from "../../css/zh/icon/dsz.svg?react";
import Yj from "../../css/zh/icon/yj.svg?react";
import By from "../../css/zh/icon/by.svg?react";
import Wx from "../../css/zh/icon/Wx.svg?react";
import Zfb from "../../css/zh/icon/zfb.svg?react";
import Sjh from "../../css/zh/icon/sjh.svg?react";
import Yzm from "../../css/zh/icon/yzm.svg?react";
// import styled from "styled-components";
const Zc = () => {
  const navigate = useNavigate();
  const [tong, setTong] = useState(false);
  const [myyzm, setMyyzm] = useState("");
  const [values, setValues] = useState("");
  const [email, setEmail] = useState("");
  const [da, setDa] = useState(true);
  const [captcha, setCaptcha] = useState({ data: "", text: "" });
  useEffect(() => {
    axios
      .get("http://localhost:3000/captcha")
      .then((res) => {
        setCaptcha(res.data);
        console.log(res.data.text, 111111);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  const addnum = () => {
    store.dispatch({ type: "ADD", password: values, email: email });
  };
  return (
    <div class="cc">
      <p className="my_p">
        <Left className="icon-left" />
      </p>
      <h1 className="zc_h1">创建您的账户</h1>

      <div className="zc_div">
        <Yx className="icon-yx"></Yx>
        <Dsz className="icon-dsz"></Dsz>
        {values.length > 0 ? (
          !da ? (
            <Yj
              onClick={() => {
                setDa(!da);
              }}
              className="icon-yj"
            ></Yj>
          ) : (
            <By onClick={() => setDa(!da)} className="icon-yj"></By>
          )
        ) : (
          ""
        )}

        <input
          onChange={(val) => {
            setEmail(val.target.value);
          }}
          type="text"
          placeholder="请输入您的邮箱"
        />
        <input
          placeholder="请输入您的密码"
          onChange={(val) => {
            setValues(val.target.value);
            if (val.target.value == "") {
              setDa(true);
            }
          }}
          type={da ? "password" : "text"}
        />
        <div style={{ position: "relative" }}>
          <Yzm className="icon_yzm"></Yzm>
          <input
            value={myyzm}
            onChange={(val) => {
              setMyyzm(val.target.value);
            }}
            className="zc_yzm"
            type="text"
            placeholder="请输入计算结果"
          />
          <div
            className="zc_tx"
            onClick={() => {
              axios
                .get("http://localhost:3000/captcha")
                .then((res) => {
                  setCaptcha(res.data);
                  console.log(res.data, 111111);
                })
                .catch((err) => {
                  console.log(err);
                });
            }}
            dangerouslySetInnerHTML={{ __html: captcha.data }}
          ></div>
        </div>
      </div>
      <p className="xy">
        <input
          onChange={(val) => {
            setTong(val.target.checked);
          }}
          type="checkbox"
        />
        同意《xx隐私协议》
      </p>
      <p style={{ textAlign: "center" }}>
        <button
          onClick={() => {
            if (!tong) {
              Toast.show({
                icon: "fail",
                content: "请先勾选协议",
              });
            } else {
              axios
                .post("http://localhost:3000/verify-captcha", {
                  captcha: captcha.text,
                  inp: myyzm,
                })
                .then((res) => {
                  if (res.data.code == 400) {
                    Toast.show({
                      icon: "fail",
                      content: "验证码错误",
                    });
                  } else {
                    addnum();
                    navigate("/xin");
                  }
                });
            }
          }}
          className="zc_btn"
        >
          下一步
        </button>
      </p>
      <p className="zc_qt">其他登录方式</p>
      <div style={{ display: "flex", justifyContent: "center" }}>
        <p
          onClick={() => {
            addnum();
          }}
          className="zc_h"
        >
          <Wx className="zc_wx" />
        </p>
        <p className="zc_h">
          <Zfb className="zc_wx" />
        </p>
        <p className="zc_h">
          <Sjh className="zc_wx" />
        </p>
      </div>
      <p className="qdl">
        已有账号？{" "}
        <span
          onClick={() => {
            navigate("/zh");
          }}
          style={{ color: "#7210ff" }}
        >
          {" "}
          去登录
        </span>
      </p>
    </div>
  );
};

export default Zc;
